<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">



			 <div v-width="300"><AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete></div>


			<table>
					

					<tr v-for="(item,index) in search_list">
						<td style="padding:5px;">
							
							{{ index + 1 }}

						</td>
						<td style="padding:5px;">
							
							<a target="_blank" :href="'/item?id='+item.id" >{{ item.name }}</a>

						</td>
					</tr>

					
			</table>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';


import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'商品检索'}],
      word:'',
      search_list:[],
      //智能提示控件
      value: '',
      param: {
        orgId: 1, // 自定义参数传递
        loadData,
        minWord: 1
      }
    }
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },
  //监听属性
  watch:{

  	$route(to,from){

  		//window.location.href = 'http://localhost:8080/search';
  		//刷新页面
  		this.$router.go(0);
  	}


  },
  mounted:function(){

  	//接收参数
  	var word = this.$route.query.word;

  	this.word = word;

  	console.log(this.word);

  	this.submit();
   
  
},
  methods:{
  	//关键词并更
  	onChange(data, trigger) {
      console.log(data, trigger);
    },
  	//提交注册
  	submit:function(){

 		if(this.word != ''){

  		//发送请求
  		this.axios.get('http://localhost:8000/goodssearch/',{params:{word:this.word}}).then((result) =>{

  						console.log(result);
  						//赋值操作
  						this.search_list = result.data;

  						if(this.search_list.length == 0){

  							this.$Message("对不起，暂时没有您要的商品");

  						}

  		});

  		}



  	}

     
  }
}


</script>
 
<style>



</style>